{% extends "base_jrcadmin.html" %}

	{% block content %}
	
	    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
	    <script type="text/javascript">
	      google.load('visualization', '1', {packages: ['imagechart']});
	    </script>
	    <script type="text/javascript">
	      function drawVisualization()
	      {
	      
	        // Populate the data table.
	        tradingTable = new google.visualization.DataTable();
	        
	        tradingTable.addColumn('string');
	        tradingTable.addColumn('number');
	        tradingTable.addColumn('number');
	        tradingTable.addColumn('number');
	        tradingTable.addColumn('number');
	        tradingTable.addRows({{ tlist|length }});
	      
	      	{% for trading in tlist %}
	      	
	      		tradingTable.setValue({{ forloop.counter0 }}, 0, "{{ forloop.counter }}");
	      		// Min price
	      		tradingTable.setValue({{ forloop.counter0 }}, 1, {{ trading.entry_price|add:"-4030" }});
	      		
	      		// Opening
	      		tradingTable.setValue({{ forloop.counter0 }}, 2, {{ trading.exit_price|add:"-4000" }});
	      		
	      		// Closing
	      		tradingTable.setValue({{ forloop.counter0 }}, 3, {{ trading.entry_price|add:"-4000" }});
	      		
	      		// Highest
	      		tradingTable.setValue({{ forloop.counter0 }}, 4, {{ trading.exit_price|add:"-3970" }});
	      		
	      	{% endfor %}
	      
	      
	        // Draw the chart.
	        var chart = new google.visualization.ImageCandlestickChart(document.getElementById('visualization'));
	        chart.draw(tradingTable, {width: 700});
	      }
	      
	
	      google.setOnLoadCallback(drawVisualization);
	    </script>
    
		<div id="visualization" style="width: 700px; height: 300px;">...</div>
	
	{% endblock %}
    